<template>
  <div class="numbers-wrapper">
    <div
      v-for="(digital, digitIndex) in digitals"
      :key="digitIndex"
      class="number-item"
      :class="
        (digital === ':' ? 'colon' : '') +
        ' ' +
        (digital === ':' && colonAnimate ? 'animate' : '')
      "
    >
      <div
        v-for="(column, columnIndex) in getShowNum(digital)"
        :key="columnIndex"
        class="column"
      >
        <div
          v-for="(row, rowIndex) in column"
          :key="rowIndex"
          class="cell"
          :style="rowStyle(row)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 模块引入
defineOptions({
  // 组件名称
  name: 'DigitNumberComp',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})
type IDigit = number | ':' | '-' | '.' | '\\' | '/' | '='
interface IProps {
  digitals?: IDigit[]
  digitColor?: string
  digitSize?: string
  colonAnimate?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  digitals: () => [0, ':', 234],
  digitColor: 'black',
  digitSize: '1rem',
  colonAnimate: false
})

const getNumer = (numStr: string) => {
  switch (numStr) {
    case '0':
      return [
        [1, 1, 1],
        [1, 0, 1],
        [1, 0, 1],
        [1, 0, 1],
        [1, 1, 1]
      ]
    case '1':
      return [
        [0, 1, 0],
        [0, 1, 0],
        [0, 1, 0],
        [0, 1, 0],
        [0, 1, 0]
      ]
    case '2':
      return [
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1],
        [1, 0, 0],
        [1, 1, 1]
      ]
    case '3':
      return [
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1]
      ]
    case '4':
      return [
        [1, 0, 1],
        [1, 0, 1],
        [1, 1, 1],
        [0, 0, 1],
        [0, 0, 1]
      ]
    case '5':
      return [
        [1, 1, 1],
        [1, 0, 0],
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1]
      ]
    case '6':
      return [
        [1, 1, 1],
        [1, 0, 0],
        [1, 1, 1],
        [1, 0, 1],
        [1, 1, 1]
      ]
    case '7':
      return [
        [1, 1, 1],
        [0, 0, 1],
        [0, 0, 1],
        [0, 0, 1],
        [0, 0, 1]
      ]
    case '8':
      return [
        [1, 1, 1],
        [1, 0, 1],
        [1, 1, 1],
        [1, 0, 1],
        [1, 1, 1]
      ]
    case '9':
      return [
        [1, 1, 1],
        [1, 0, 1],
        [1, 1, 1],
        [0, 0, 1],
        [1, 1, 1]
      ]
    case ':':
      return [
        [0, 0, 0],
        [0, 1, 0],
        [0, 0, 0],
        [0, 1, 0],
        [0, 0, 0]
      ]
    case '.':
      return [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0],
        [0, 1, 0]
      ]
    case '/':
      return [
        [0, 0, 0],
        [0, 0, 1],
        [0, 1, 0],
        [1, 0, 0],
        [0, 0, 0]
      ]
    case '\\':
      return [
        [0, 0, 0],
        [1, 0, 0],
        [0, 1, 0],
        [0, 0, 1],
        [0, 0, 0]
      ]
    case '+':
      return [
        [0, 0, 0],
        [0, 1, 0],
        [1, 1, 1],
        [0, 1, 0],
        [0, 0, 0]
      ]
    case '-':
      return [
        [0, 0, 0],
        [0, 0, 0],
        [1, 1, 1],
        [0, 0, 0],
        [0, 0, 0]
      ]
    case '=':
      return [
        [0, 0, 0],
        [1, 1, 1],
        [0, 0, 0],
        [1, 1, 1],
        [0, 0, 0]
      ]
    default:
      return [[0], [0], [0], [0], [0]]
  }
}

const rowStyle = (row: number) => {
  let res = `width:calc(${props.digitSize} / 5);height:calc(${props.digitSize} / 5);`
  if (row == 1) {
    res += `background-color:${props.digitColor};`
  }
  return res
}

const getShowNum = (num: string | number) => {
  num = num.toString()
  let res: number[][] = []
  for (let i = 0; i < num.length; i++) {
    let temp = getNumer(num[i])
    if (num[i] != '1') {
      for (let j = 0; j < temp.length; j++) {
        temp[j].push(0)
      }
    }
    if (res.length == 0) {
      res = temp
    } else {
      for (let j = 0; j < temp.length; j++) {
        res[j] = res[j].concat(temp[j])
      }
    }
  }
  return res
}
</script>

<style scoped lang="scss">
.numbers-wrapper {
  display: flex;
  flex-wrap: wrap;
  .number-item {
    flex-wrap: wrap;
    .column {
      display: flex;
      //   font-size: calc();
    }
  }
  .colon {
    opacity: 1;
    &.animate {
      animation: blink 1s infinite;
    }
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
</style>
